<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='js/vue.js'></script>
    <!-- <script src='js/jquery.js'></script> -->

    <style>
        #picture_box {
            position: relative;
            width: 200px;
            height: 200px;
        }

        #canvas {
            border: #158 1px solid;
            
        }

        #canvas2 {
            border: #158 1px solid;
            position: absolute;
            /* border-radius: 50%; */
        }

        #canvas3 {
            border: #158 1px solid;
            position: absolute;
            /* border-radius: 50%; */
        }

        #canvas4 {
            border: #158 1px solid;
            /* position: relative; */
            /* border-radius: 50%; */
        }

        #rect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border: #000 1px dashed;
            /* background: #060; */
        }

        .rect>span {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 2px solid orange;
            background-color: #fff;
        }

        .rect .left-top {
            left: -6px;
            top: -6px;
            cursor: nwse-resize;
        }

        .rect .middle-top {
            left: 50%;
            top: -6px;
            transform: translateX(-50%);
            cursor: n-resize;
        }

        .rect .right-top {
            right: -6px;
            top: -6px;
            cursor: nesw-resize;
        }

        .rect .right-middle {
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            cursor: e-resize;
        }

        .rect .right-bottom {
            right: -6px;
            bottom: -6px;
            cursor: nwse-resize;
        }

        .rect .middle-bottom {
            left: 50%;
            bottom: -6px;
            transform: translateX(-50%);
            cursor: s-resize;
        }

        .rect .left-bottom {
            left: -6px;
            bottom: -6px;
            cursor: nesw-resize;
        }

        .rect .left-middle {
            left: -6px;
            top: 50%;
            transform: translateY(-50%);
            cursor: w-resize;
        }

        #imgtxt {
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%,-50%); */
        }

        .canvasflex,
        .tooltar {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="tooltar">
            <table>
                <tr>
                    <td>精确截图宽</td>
                    <td><input type="number" id="screenshot_width" ref="screenshot_width" v-model="ss_w"></td>
                </tr>
                <tr>
                    <td>精确截图高</td>
                    <td><input type="number" id="screenshot_height" ref="screenshot_height" v-model="ss_h"></td>
                </tr>
                <tr>
                    <td><button @click="load_to_be_captured_img">加载图片</button></td>
                    <td><button @click="cutToCanvas">截图</button></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>输出像素</td>
                    <td>
                        <select name="" id="out_pic_pixel" ref="out_pic_pixel" v-model="out_box_px">
                            <option value="150px">150px</option>
                            <option value="200px">200px</option>
                            <option value="100px">100px</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>头像框</td>
                    <td>
                        <button @click="head">添加头像框</button>
                        <button @click="headClear">取消头像框</button>
                    </td>
                </tr>
            </table>

            <table>
                <tr>
                    <td>输入文字</td>
                    <td><input type="text" placeholder="输入文字" v-model="imgtxt_text"></td>
                </tr>
                <tr>
                    <td>调整文字位置</td>
                    <td>
                        <label>x:</label>
                        <input type="range" v-model="rangex"><br>
                        <label>y:</label>
                        <input type="range" v-model="rangey">
                    </td>
                </tr>
                <tr>
                    <td>字体</td>
                    <td>
                        <select id="wordFont" ref="wordFont">
                            <option value=" Microsoft YaHei">微软雅黑 Microsoft YaHei</option>
                            <option value=" SimSun">宋体 SimSun</option>
                            <option value=" SimHei">黑体 SimHei</option>
                            <option value=" Microsoft JhengHei">微软正黑体 Microsoft JhengHei</option>
                            <option value=" NSimSun">新宋体 NSimSun</option>
                            <option value=" PMingLiU">新细明体 PMingLiU</option>
                            <option value=" MingLiU">细明体 MingLiU</option>
                            <option value=" DFKai-SB">标楷体 DFKai-SB</option>
                            <option value=" FangSong">仿宋 FangSong</option>
                            <option value=" KaiTi">楷体 KaiTi</option>
                            <option value=" FangSong_GB2312">仿宋_GB2312 FangSong_GB2312</option>
                            <option value=" KaiTi_GB2312">楷体_GB2312 KaiTi_GB2312</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>字体颜色</td>
                    <td><input type="color" name="" id="wordColor" ref="wordColor"></td>
                </tr>
                <tr>
                    <td>字体大小</td>
                    <td><input type="text" size="2" v-model="word_size">px</td>
                </tr>
                <tr>
                    <td>
                        <button @click="addText">文字添加到画布</button>
                    </td>
                </tr>
                <tr>
                    <td><button @click="merge">生成</button></td>
                    <td><button @click="down" v-show="show_btn_down">下载</button></td>
                    <!-- <td><a ref="imgdown" :href="mergeImg" download="Image01.png" v-show="false">下载</a></td> -->
                </tr>
            </table>
        </div>

        <!-- <input type="file" id="imgfile" ref="imgfile"> -->

        <div class="canvasflex">

            <div id="picture_box" ref="picBox">
                <!-- 被截图的画布 -->
                <canvas id="canvas" ref="canvas" width="200px" height="200px"></canvas>
                <!-- 截图框 -->
                <div id="rect" ref="rect" class="rect">
                    <!-- 控制截图框的点 -->
                    <span class="left-top dot"></span>
                    <span class="middle-top dot"></span>
                    <span class="right-top dot"></span>
                    <span class="right-middle dot"></span>
                    <span class="right-bottom dot"></span>
                    <span class="middle-bottom dot"></span>
                    <span class="left-bottom dot"></span>
                    <span class="left-middle dot"></span>
                </div>
                <!-- <span id="imgtxt" ref="imgtxt">{{imgtxt_text}}</span> -->

            </div>
            <div style="position: relative; width: 200px; height: 200px;">
                <!-- canvas2 放截图后的图片 添加文字 -->
                <canvas id="canvas2" ref="canvas2" :width="out_box_px" :height="out_box_px"></canvas>
                <!-- 文字显示 -->
                <span id="imgtxt" ref="imgtxt" style="display: block;">{{imgtxt_text}}</span>
                <!-- canvas3 放头像框 -->
                <canvas id="canvas3" ref="canvas3" :width="out_box_px" :height="out_box_px"></canvas>
            </div>
            <div>
                <!-- 将canvas2 和 canvas3 图像数据 合并 -->
                <canvas id="canvas4" ref="canvas4" :width="out_box_px" :height="out_box_px" v-show="false"></canvas>
            </div>

        </div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                rangex: 50, //滑动条控制的span（文字框）x轴 百分比坐标
                rangey: 50, //滑动条控制的span（文字框）y轴 百分比坐标
                // canvas Dom
                canvas: null, canvas2: null, canvas3: null, canvas4: null,//被剪裁   底层   头像框层
                // 矩形框Dom
                rect: null,
                // 通过canvas获取的
                ctx: null, ctx2: null, ctx3: null, ctx4: null,

                //文字框span
                imgtxt: null,
                // input框输入的文字，将显示在span（imgtxt）中
                imgtxt_text: '',

                //字体大小
                word_size: 16,

                ss_w: 100,  //截图矩形框宽度
                ss_h: 100,  //截图矩形框高度

                //canvas2 和 canvas3 以及 canvas4框大小
                out_box_px: '200px',
                //合并后的图片url
                mergeImg: "",
                //下载按钮是显示
                show_btn_down: false,

            }
        },
        computed: {
            //计算截图框的top
            rectTop() {
                return this.rangey * (this.canvas2.offsetHeight - this.imgtxt.offsetHeight) / 100
            },
            //计算截图框的left
            rectLeft() {
                return this.rangex * (this.canvas2.offsetWidth - this.imgtxt.offsetWidth) / 100
            }
        },
        methods: {
            //测试数据
            handle() {
                console.log(this.canvas);
                this.ctx = canvas.getContext('2d')
                console.log("ctc:", this.ctx);
                this.ctx.moveTo(200, 300) // 起点为(200，300)
                this.ctx.lineTo(500, 300)
                this.ctx.stroke()

                console.log('aaaaaaa', this.canvas.getBoundingClientRect());
            },
            //加载被截图图片到canvas
            load_to_be_captured_img() {
                let imgfile = document.createElement('input')
                imgfile.type = 'file'
                imgfile.onchange = () => {
                    // console.log(this.files);
                    var reader = new FileReader();
                    var file = imgfile.files[0]

                    reader.readAsDataURL(file)
                    reader.onloadend = (e) => {
                        console.log(e.target.result + "路径")
                        this.drawImg(e.target.result)
                    };
                }
                imgfile.click()
            },
            //将图片载入网页
            drawImg(src) {
                let img = new Image()
                img.onload = () => {
                    imw = img.width
                    imh = img.height
                    let scale = 1;
                    if (imw >= imh) {// && imw > 500) {
                        scale = 500 / imw
                        this.canvas.width = 500
                        this.canvas.height = imh * scale
                        this.$refs.picBox.style.width = 500 + 'px'
                        this.$refs.picBox.style.height = imh * scale + 'px'
                    } else if (imh > imw) {// && imh > 500) {
                        scale = 500 / imh
                        this.canvas.width = imw * scale
                        this.canvas.height = 500
                        this.$refs.picBox.style.width = imh * scale + 'px'
                        this.$refs.picBox.style.height = 500 + 'px'
                    }
                    this.ctx.drawImage(img, 0, 0, imw * scale, imh * scale)//绘制图片
                }
                img.src = src
                this.img = src
            },
            draw_by_src(canvas, src) {
                ctx = canvas.getContext('2d')

                let img = new Image()
                img.onload = () => {
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)//绘制图片

                }
                img.src = src
            },



            //隐藏下载按钮
            hide_btn_down() {
                this.show_btn_down = false;
            },
            //显示下载按钮
            not_hide_btn_down() {
                this.show_btn_down = true;
            },
            draw_by_img(canvas, img) {
                ctx = canvas.getContext('2d')
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)//绘制图片
            },
            //         this.ctx.drawImage(
            //             img, //规定要使用的图像、画布或视频。
            //             0, 0, //开始剪切的 x 坐标位置。
            //             img.width, img.height,  //被剪切图像的高度。
            //             this.imgX, this.imgY,//在画布上放置图像的 x 、y坐标位置。
            //             img.width * this.imgScale, img.height * this.imgScale  //要使用的图像的宽度、高度
            //         );
            //     }

            // windowToCanvas(x, y) {
            //     var box = this.canvas.getBoundingClientRect();  //这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
            //     return {
            //         x: x - box.left - (box.width - canvas.width) / 2,
            //         y: y - box.top - (box.height - canvas.height) / 2
            //     };
            // },

            //添加文字到画布canvas2
            addText() {
                let text = this.imgtxt_text
                let position = {
                    x: this.imgtxt.offsetLeft,
                    y: this.imgtxt.offsetTop
                }
                let img_w = Number(getComputedStyle(imgtxt, null).width.split('px')[0])
                let img_h = Number(getComputedStyle(imgtxt, null).height.split('px')[0])

                this.ctx2.font = getComputedStyle(imgtxt, null).font
                this.ctx2.fillStyle = getComputedStyle(imgtxt, null).color
                let fontSize = Number(getComputedStyle(imgtxt, null).fontSize.split('px')[0])

                this.ctx2.fillText(text, position.x, position.y + fontSize)
                //初始化数据
                this.imgtxt_text = ''
                this.rangex = 50
                this.rangey = 50
                //隐藏下载按钮
                this.hide_btn_down()
            },
            cutToCanvas() { //剪裁矩形框选中的内容放到canvas2
                let pos = {
                    x: this.rect.offsetLeft,
                    y: this.rect.offsetTop,
                    w: Number(getComputedStyle(rect, null).width.split('px')[0]),
                    h: Number(getComputedStyle(rect, null).height.split('px')[0])
                }
                console.log(pos);
                let imgdata = this.ctx.getImageData(pos.x, pos.y, pos.w, pos.h)
                imgpromise = this.imagedata_to_image(imgdata)
                imgpromise.then(img => {
                    this.draw_by_img(this.canvas2, img)
                })
                this.hide_btn_down()
            },
            //imagedata数据转image
            imagedata_to_image(imagedata) {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width = imagedata.width;
                canvas.height = imagedata.height;
                ctx.putImageData(imagedata, 0, 0);
                var image = new Image();
                image.src = canvas.toDataURL();
                // return image;
                // console.log('imagedata_to_image', image);

                return new Promise((resolve, reject) => {
                    var image = new Image();
                    image.src = canvas.toDataURL();
                    console.log('imagedata_to_image promise', image);
                    resolve(image);
                    // return image
                    reader.onerror = reject;
                })
            },
            //处理canvas画布 使得画布只有中间圆形区域有图形 (没有用)
            handle_canvas(canvas) {
                ctx = canvas.getContext('2d')
                let width = canvas.width;
                let height = canvas.height;
                circle = {
                    x: width / 2,
                    y: height / 2,
                    r: width / 2
                }

                ctx.beginPath();
                ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
                ctx.clip(); //剪切路径

            },
            //添加头像框
            head() {
                //创建input文件框
                let fileinput = document.createElement('input');
                fileinput.type = 'file'
                //点击选中图片触发事件
                fileinput.onchange = () => {
                    //读取图片文件
                    var reader = new FileReader();
                    var file = fileinput.files[0]

                    reader.readAsDataURL(file)
                    reader.onloadend = (e) => {
                        //清空头像框画布内容
                        this.ctx3.clearRect(0, 0, this.canvas3.width, this.canvas3.height)
                        //绘画头像框
                        this.draw_by_src(this.canvas3, e.target.result)
                    };
                }
                //模拟点击input
                fileinput.click()
                this.hide_btn_down()
            },
            headClear() {
                //清空头像框画布内容
                this.ctx3.clearRect(0, 0, this.canvas3.width, this.canvas3.height)
                this.hide_btn_down()
            },
            preloadImages(...images) {
                console.log(images.length);
                var promises = [];
                var loadedImages = []; // 用于存储已加载的图片对象
                for (var i = 0; i < images.length; i++) {
                    promises.push(new Promise(function (resolve, reject) {
                        var img = new Image();
                        loadedImages.push(img); // 将加载完成的图片对象存储到数组中
                        img.onload = function () {

                            resolve(img);
                        };
                        img.src = images[i];
                    }));
                }
                return Promise.all(promises).then(function () {
                    return loadedImages; // 返回所有已加载的图片对象
                });
            },
            merge() {   //合成图层
                this.hide_btn_down()
                this.ctx4.clearRect(0, 0, this.canvas3.width, this.canvas3.height)
                let srcs = [
                    this.canvas2.toDataURL(),
                    this.canvas3.toDataURL()
                    // './img/1.png',
                    // './img/2.png'
                ]
                this.preloadImages(...srcs).then((images) => {
                    // 所有图片都已加载完成，可以使用已加载的图片对象进行操作
                    console.log('所有图片：' + images);
                    for (let i = 0; i < images.length; i++) {
                        this.draw_by_img(this.canvas4, images[i]);
                        //     // console.log(i + ':' + images[i]);
                    }
                });
                this.not_hide_btn_down()
            },

            down() {    //下载按钮
                this.mergeImg = this.canvas4.toDataURL()
                a = document.createElement('a')
                a.href = this.canvas4.toDataURL()
                a.download = 'image01.png'
                a.click()
                // })

            }
        },
        mounted() {
            this.canvas = this.$refs.canvas
            this.canvas2 = this.$refs.canvas2
            this.canvas3 = this.$refs.canvas3
            this.canvas4 = this.$refs.canvas4
            // this.handle_canvas(this.canvas2)
            // this.handle_canvas(this.canvas3)
            // this.handle_canvas(this.canvas4)

            this.ctx = this.canvas.getContext('2d')
            this.ctx2 = this.canvas2.getContext('2d')
            this.ctx3 = this.canvas3.getContext('2d')
            this.ctx4 = this.canvas4.getContext('2d')
            this.rect = this.$refs.rect
            this.imgtxt = this.$refs.imgtxt

            //添加文字颜色
            this.$refs.wordColor.onchange = () => {
                this.imgtxt.style.color = this.$refs.wordColor.value
            }
            //字体框事件
            this.$refs.wordFont.onchange = e => {
                this.imgtxt.style.fontFamily = this.$refs.wordFont.value
            }


            const dom = document.getElementById('picture_box')
            const origin = dom.getBoundingClientRect()
            const rect = this.rect
            const parentBorder = Number(getComputedStyle(dom, null).borderWidth.split('px')[0]) // 父元素边框 如果你明确知道边框宽度，就不需要这行，直接赋值就行
            const childBorder = Number(getComputedStyle(rect, null).borderWidth.split('px')[0]) // 子元素边框 如果你明确知道边框宽度，就不需要这行，直接赋值就行

            //截图框事件
            this.rect.onmousedown = e => {
                if (e.target !== rect && e.target.className.indexOf('dot') === -1) return // 类名中包含被放行的dot除外
                const flag = mousedownHandle(e)
                let left = e.clientX
                let top = e.clientY
                const width = rect.offsetWidth
                const height = rect.offsetHeight
                const [dragX, dragY] = flag
                // 拖动
                if (dragX === -1 && dragY === -1) {
                    left -= rect.offsetLeft // 要保持之前矩形框的坐标值
                    top -= rect.offsetTop
                }
                const child = e.target.getBoundingClientRect()
                document.onmousemove = e => {
                    // 取消浏览器因回流导致的默认事件及冒泡事件
                    e.preventDefault()
                    if (e.stopPropagation) {
                        e.stopPropagation()
                    } else {
                        e.cancelable = true
                    }
                    const finallPoint = {
                        left: 0,
                        top: 0,
                        width: 0,
                        height: 0
                    }
                    if (dragX === -1 && dragY === -1) {
                        rect.style.cursor = 'move'
                        const rightArea = dom.offsetWidth - rect.offsetWidth - (childBorder * 2) // 右边界
                        const bottomArea = dom.offsetHeight - rect.offsetHeight - (childBorder * 2) // 下边界
                        const leftArea = 0 // 左边界
                        const topArea = 0 // 上边界
                        finallPoint.left = e.clientX - left > rightArea ? rightArea : (e.clientX - left < leftArea ? leftArea : e.clientX - left)
                        finallPoint.top = e.clientY - top > bottomArea ? bottomArea : (e.clientY - top < topArea ? topArea : e.clientY - top)
                        rect.style.left = finallPoint.left + 'px'
                        rect.style.top = finallPoint.top + 'px'
                    } else if (dragX === 0 && dragY === 0) { // 左上角拉伸
                        finallPoint.left = e.clientX > origin.x ? ((e.clientX > (left + width)) ? left + width - origin.x : e.clientX - origin.x) : 0
                        finallPoint.top = e.clientY > origin.y ? ((e.clientY > (top + height)) ? top + height - origin.y : e.clientY - origin.y) : 0
                        finallPoint.width = e.clientX > origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - origin.x)
                        finallPoint.height = e.clientY > origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - origin.y)
                        rect.style.left = finallPoint.left + 'px'
                        rect.style.top = finallPoint.top + 'px'
                        rect.style.width = finallPoint.width + 'px'
                        rect.style.height = finallPoint.height + 'px'
                    } else if (dragX === 1 && dragY === 0) { // 中上拉伸
                        finallPoint.top = e.clientY > origin.y ? ((e.clientY > (top + height)) ? top + height - origin.y : e.clientY - origin.y) : 0
                        finallPoint.height = e.clientY > origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - origin.y)
                        rect.style.top = finallPoint.top + 'px'
                        rect.style.height = finallPoint.height + 'px'
                    } else if (dragX === 2 && dragY === 0) { // 右上角拉伸
                        finallPoint.top = e.clientY > origin.y ? ((e.clientY > (top + height)) ? top + height - origin.y : e.clientY - origin.y) : 0
                        finallPoint.width = (e.clientX - left + width > dom.offsetWidth - rect.offsetLeft - (parentBorder * 2 + childBorder * 2) ? dom.offsetWidth - rect.offsetLeft - (parentBorder * 2 + childBorder * 2) : e.clientX - left + width)
                        finallPoint.height = e.clientY > origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - origin.y)
                        rect.style.top = finallPoint.top + 'px'
                        rect.style.width = finallPoint.width + 'px'
                        rect.style.height = finallPoint.height + 'px'
                    } else if (dragX === 2 && dragY === 1) { // 右中拉伸
                        finallPoint.width = (e.clientX - left + width > dom.offsetWidth - rect.offsetLeft - (parentBorder * 2 + childBorder * 2) ? dom.offsetWidth - rect.offsetLeft - (parentBorder * 2 + childBorder * 2) : e.clientX - left + width)
                        rect.style.width = finallPoint.width + 'px'
                    } else if (dragX === 2 && dragY === 2) { // 右下角拉伸
                        finallPoint.width = (e.clientX - left + width > dom.offsetWidth - rect.offsetLeft - (parentBorder * 2 + childBorder * 2) ? dom.offsetWidth - rect.offsetLeft - (parentBorder * 2 + childBorder * 2) : e.clientX - left + width)
                        finallPoint.height = (e.clientY - top + height > dom.offsetHeight - rect.offsetTop - (parentBorder * 2 + childBorder * 2) ? dom.offsetHeight - rect.offsetTop - (parentBorder * 2 + childBorder * 2) : e.clientY - top + height)
                        rect.style.width = finallPoint.width + 'px'
                        rect.style.height = finallPoint.height + 'px'
                    } else if (dragX === 1 && dragY === 2) { // 中下拉伸
                        finallPoint.height = (e.clientY - top + height > dom.offsetHeight - rect.offsetTop - (parentBorder * 2 + childBorder * 2) ? dom.offsetHeight - rect.offsetTop - (parentBorder * 2 + childBorder * 2) : e.clientY - top + height)
                        rect.style.height = finallPoint.height + 'px'
                    } else if (dragX === 0 && dragY === 2) { // 左下角拉伸
                        finallPoint.left = e.clientX > origin.x ? ((e.clientX > (left + width)) ? left + width - origin.x : e.clientX - origin.x) : 0
                        finallPoint.width = e.clientX > origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - origin.x)
                        finallPoint.height = (e.clientY - top + height > dom.offsetHeight - rect.offsetTop - (parentBorder * 2 + childBorder * 2) ? dom.offsetHeight - rect.offsetTop - (parentBorder * 2 + childBorder * 2) : e.clientY - top + height)
                        rect.style.left = finallPoint.left + 'px'
                        rect.style.width = finallPoint.width + 'px'
                        rect.style.height = finallPoint.height + 'px'
                    } else if (dragX === 0 && dragY === 1) { // 左中拉伸
                        finallPoint.left = e.clientX > origin.x ? ((e.clientX > (left + width)) ? left + width - origin.x : e.clientX - origin.x) : 0
                        finallPoint.width = e.clientX > origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - origin.x)
                        rect.style.left = finallPoint.left + 'px'
                        rect.style.width = finallPoint.width + 'px'
                    }
                }
                document.onmouseup = e => {
                    document.onmousemove = null
                    document.onmouseup = null
                    rect.style.cursor = 'move'
                }
            }


            this.rect.onmousemove = e => {
                // console.log('触发事件');

                //当截图框大小改变时更新data中的值
                w = Number(getComputedStyle(this.rect, null).width.split('px')[0])
                h = Number(getComputedStyle(this.rect, null).height.split('px')[0])
                if (w != this.ss_w) {
                    this.ss_w = w
                }

                if (h != this.ss_h) {
                    this.ss_h = h
                }
            }

            const mousedownHandle = (e) => {
                let flag = 0 // 点击的是除边角以外的其他部分 拖动
                let startX = e.offsetX
                let startY = e.offsetY
                let width = e.target.offsetWidth
                let height = e.target.offsetHeight
                if (e.target !== rect) {
                    flag = 1 // 点击的是边角 缩放
                    const parent = e.target.offsetParent.getBoundingClientRect()
                    const child = e.target.getBoundingClientRect()
                    startX = child.x - parent.x
                    startY = child.y - parent.y
                    width = e.target.offsetParent.offsetWidth
                    height = e.target.offsetParent.offsetHeight
                }
                const difference = 12 // 点击四边角12 px范围为拉伸，其他为拖动,这个值可以根据你需要的来调整
                let left = 0 // 0 => left, 1 => middle, 2 => right, -1 => 点击的位置不能被拖动
                let top = 0 // 0 => top, 1 => middle, 2 => bottom, -1 => 点击的位置不能被拖动
                if (startX < difference) { // 点击的位置为矩形左侧
                    left = 0
                } else if (startX > width / 2 - difference && startX < width / 2 + difference) { // 点击的位置为矩形中间 width/2 - 6px ~ width/2 + 6px
                    left = 1
                } else if (startX < width && startX > width - difference) { // 点击的位置为矩形右侧 width - 6px ~ width
                    left = 2
                } else {
                    left = -1
                }

                if (startY < difference) { // 点击的位置为矩形上侧
                    top = 0
                } else if (startY > height / 2 - difference && startY < height / 2 + difference) { // 点击的位置为矩形中间 height/2 - 6px ~ height/2 + 6px
                    top = 1
                } else if (startY < height && startY > height - difference) { // 点击的位置为矩形下侧 height - 6px ~ height
                    top = 2
                } else {
                    top = -1
                }
                if (left === -1 || top === -1 || (left === 1 && top === 1)) {
                    return [-1, -1]
                }
                return [left, top] // 只会有八个位置能被准确返回，其余都是返回[-1, -1]
            }
        },
        watch: {
            //监视滚动条 x y 值的变化
            rangex() {
                //改变文字框的x位置
                this.imgtxt.style.left = this.rectLeft + 'px'
            },
            rangey() {
                //改变文字框的y位置
                this.imgtxt.style.top = this.rectTop + 'px'
            },
            //监视输入的ss_w（截图框宽度）的值 有变化则同步变化dom中截图框的宽度
            ss_w() {
                if (this.ss_w >= 0)
                    this.rect.style.width = this.ss_w + "px"
            },
            //监视输入的ss_h（截图框高度）的值 有变化则同步变化dom中截图框的高度
            ss_h() {
                if (this.ss_h >= 0)
                    this.rect.style.height = this.ss_h + "px"
            },
            //监听输入的字体大小
            word_size(){
                this.$refs.imgtxt.style.fontSize = this.word_size + 'px'
            }
        }
    })
</script>

</html>